<div class="user">
  <div class="action">

    <nz-dropdown [nzTrigger]="'click'">
      <div class="avatar" nz-dropdown>
        <div>
          <nz-avatar [nzText]="avatar" nzSize='large' style="background-color:#f32f2f"></nz-avatar>
          <div class="info">
            <h3>{{ currentUser.nickname }}</h3>
            <span>{{ currentUser.email }}</span>
          </div>
        </div>
      </div>
      <ul nz-menu
          [ngStyle]="{'width': '200px',
                     'margin-left': '30px',
                     'padding': '5px 0'}">
        <li nz-menu-item (click)="handleClickSettings()">
          <p [ngStyle]="{'font-size': '14px', 'font-weight': 'bold'}">
            <i class="anticon anticon-setting"
               [ngStyle]="{'margin-right': '5px'}"></i>
               设置
          </p>
        </li>
        <li nz-menu-item>
          <p [ngStyle]="{'font-size': '14px', 'font-weight': 'bold'}">
            <i class="anticon anticon-cloud-download-o"
               [ngStyle]="{'margin-right': '5px'}"></i>
               导入
          </p>
        </li>
        <li nz-menu-divider></li>
        <li nz-menu-item (click)="logout()">
          <p [ngStyle]="{'font-size': '14px', 'font-weight': 'bold'}">
            <i class="anticon anticon-logout"
               [ngStyle]="{'color': 'red', 'margin-right': '5px'}"></i>
               注销
          </p>
        </li>
      </ul>
    </nz-dropdown>

    <a routerLink="/search">
      <i class="anticon anticon-search" style="font-size:24px"></i>
    </a>
  </div>
</div>

<nz-modal [nzVisible]="isModalVisible"
          [nzContent]="modalContent"
          [nzTitle]="'设置'"
          [nzFooter]="null"
          (nzOnCancel)="handleCancel($event)">
  <ng-template #modalContent>
    <div class="content">
      <div class="overview">
        <nz-avatar class='avatar' style="background-color:#f32f2f"></nz-avatar>
        <span class='avatar-text'>{{avatar}}</span>
        <p class='name'>{{currentUser.nickname}}</p>
        <p class='email'>{{currentUser.email}}</p>
        <a (click)="logout()">注销</a>
      </div>
      <div class="normal">
        <p class="title">常规</p>
      </div>
      <div class="help">
        <p class="title">帮助与反馈</p>
      </div>
      <div class="about">
        <p class="title">关于</p>
      </div>
    </div>
  </ng-template>
</nz-modal>
